<template>
  <div class="scanner">
    <van-nav-bar title="重打" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
    <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
      <van-col>
        <van-form :model="formItem" ref="formItem">
          <van-field
            v-model="formItem.pickTaskCode"
            id="pickTaskCode"
            ref="pickTaskCode"
            name="拣货任务号"
            label="拣货任务号"
            placeholder="拣货任务号"
            @keyup.enter.native="searchPickTaskCodeData"
            @focus="pickTaskCodeFocusClick"
            @click="pickTaskCodeFocusClick"
            :readonly="pickTaskCodeReadOnly"
            :rules="[{required: true, message: '请扫描拣货任务号'}]"
          />
          <van-field
            v-model="formItem.printerName"
            id="printerName"
            ref="printerName"
            name="打印机名称"
            label="打印机名称"
            placeholder="打印机名称"
            @keyup.enter.native="searchPrintNameData"
            @focus="printerNameFocusClick"
            @click="printerNameFocusClick"
            :readonly="printerNameReadOnly"
            :rules="[{required: true, message: '请扫描打印机名称'}]"
          />
          <van-field v-model="formItem.shopPrintName" id="shopPrintName" ref="shopPrintName" label="快递面单打印机名称" :disabled="true" />
          <van-field
            v-model="formItem.expressPrintName"
            id="expressPrintName"
            ref="expressPrintName"
            label="购物清单打印机名称"
            :disabled="true"
          />
        </van-form>
      </van-col>
    </van-row>
    <van-row gutter="31">
      <van-col>
        <van-button type="primary" span="8" @click="printTo('shop')" :disabled="printBtnDisabled">打印面单</van-button>
      </van-col>
      <van-col>
        <van-button type="primary" span="8" @click="printTo('express')" :disabled="printBtnDisabled">打印清单</van-button>
      </van-col>
      <van-col>
        <van-button type="primary" span="8" @click="printTo('all')" :disabled="printBtnDisabled">打印全部</van-button>
      </van-col>
    </van-row>
    <van-overlay :show="showMsgOverlay" @click="showMsgOverlay = false">
      <div class="wrapper">
        <div class="msgTxt">{{ showMsg }}</div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {getPickTaskPdaData} from "@/api/sortScan/sortScan.js";
import {printShoppingListWithBatch} from "@/api/sortScan/printShopping.js";
import {expressBatchPrint, getPrinterName} from "@/api/sortScan/printExpress.js";
import {getPrintConfig} from "@/api/express/projectPrintConfig.js";
import {getPrinterTempInfo} from "@/api/sortScan/printTempConfig.js";
import config from "@/config";
const {pdaPrintUserName} = config;
export default {
  name: "b2cSortScan",
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"])
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "pickTaskCode") {
          this.formItem.pickTaskCode = data.data;
          this.searchPickTaskCodeData();
        } else if (input == "printerName") {
          this.formItem.printerName = data.data;
          this.searchPrintNameData();
        }
      },
      deep: true
    }
  },
  mounted() {
    this.pickTaskCodeFocus();
  },
  data() {
    return {
      formItem: {
        printerName: "",
        expressPrintName: "",
        shopPrintName: "",
        pickTaskCode: ""
      },
      printBtnDisabled: false,
      printerNameReadOnly: false,
      pickTaskCodeReadOnly: false,
      showMsgOverlay: false,
      showMsg: ""
    };
  },
  methods: {
    searchPickTaskCodeData() {
      if (this.formItem.pickTaskCode == "") {
        this.$toast.fail("拣货任务号不能为空");
        this.pickTaskCodeFocus();
      } else {
        getPickTaskPdaData(this.formItem.pickTaskCode, "pickTaskCode", this.userData.sysUserLoginName).then(response => {
          if (response.data.status) {
            this.printNameFocus();
          } else {
            this.formItem.pickTaskCode = "";
            this.msgShowTime(response.data.message);
            this.pickTaskCodeFocus();
          }
        });
      }
    },
    searchPrintNameData() {
      if (this.formItem.printerName == "") {
        this.$toast.fail("快递面单打印机名称不能为空");
        this.printNameFocus();
      } else {
        getPrinterTempInfo(this.formItem.printerName).then(response => {
          if (response.data.status) {
            let pageData = response.data.data;
            this.formItem.expressPrintName = pageData.expressName;
            this.formItem.shopPrintName = pageData.shoppingName;
          } else {
            this.formItem.expressPrintName = "";
            this.formItem.shopPrintName = "";
            this.msgShowTime(response.data.message);
          }
        });
      }
    },
    printNameFocus() {
      this.$nextTick(() => {
        this.$refs["printerName"].focus();
      });
    },
    pickTaskCodeFocus() {
      this.$nextTick(() => {
        this.$refs["pickTaskCode"].focus();
      });
    },
    printerNameFocusClick() {
      this.printerNameReadOnly = true;
      setTimeout(() => {
        this.printerNameReadOnly = false;
      }, 200);
    },
    pickTaskCodeFocusClick() {
      this.pickTaskCodeReadOnly = true;
      setTimeout(() => {
        this.pickTaskCodeReadOnly = false;
      }, 200);
    },
    onClickLeft() {
      this.$router.push({
        name: "homeIndex"
      });
    },
    printTo(type) {
      if (this.formItem.pickTaskCode == "") {
        this.$toast.fail("拣货任务号不能为空");
        this.pickTaskCodeFocus();
      } else if (this.formItem.printerName == "") {
        this.$toast.fail("打印机名称不能为空");
        this.printNameFocus();
      } else if (this.formItem.expressPrintName == "") {
        this.$toast.fail("面单打印机名称不能为空");
        this.printNameFocus();
      } else if (this.formItem.shopPrintName == "") {
        this.$toast.fail("清单打印机名称不能为空");
        this.printNameFocus();
      } else {
        this.printBtnDisabled = true;
        getPrintConfig("5404", "1").then(response => {
          let printConfig = response.data;
          if (printConfig.status) {
            let shopprintTemplate = printConfig.data[0].templateName;
            getPrinterName("uq_ZTO_Delivery", shopprintTemplate, pdaPrintUserName).then(response => {
              if (response.data.status) {
                let expressPageData = response.data.data.expressPrinterName;
                let shoppingPageData = response.data.data.shoppingPrinterName;
                let expressClientId = "";
                let shoppingClientId = "";
                for (let i = 0; i < expressPageData.length; i++) {
                  if (expressPageData[i].printerName == this.formItem.expressPrintName) {
                    expressClientId = expressPageData[i].clientId;
                    break;
                  }
                }
                for (let i = 0; i < shoppingPageData.length; i++) {
                  if (shoppingPageData[i].printerName == this.formItem.shopPrintName) {
                    shoppingClientId = shoppingPageData[i].clientId;
                    break;
                  }
                }
                if (expressClientId == "") {
                  this.$toast.fail("快递面单打印机不存在");
                  this.printBtnDisabled = false;
                  this.formItem.printerName = "";
                  this.printNameFocus();
                } else if (shoppingClientId == "") {
                  this.$toast.fail("购物清单打印机不存在");
                  this.printBtnDisabled = false;
                  this.formItem.printerName = "";
                  this.printNameFocus();
                } else {
                  if (type == "shop") {
                    this.printExpressBill(expressClientId);
                  } else if (type == "express") {
                    this.printShopping(shoppingClientId, shopprintTemplate);
                  } else {
                    this.printShopping(shoppingClientId, shopprintTemplate);
                    this.printExpressBill(expressClientId);
                  }
                }
              } else {
                this.printBtnDisabled = false;
                this.formItem.printerName = "";
                this.printNameFocus();
                this.msgShowTime(response.data.message);
              }
            });
          } else {
            this.printBtnDisabled = false;
            this.formItem.printerName = "";
            this.printNameFocus();
            this.msgShowTime(printConfig.message);
          }
        });
      }
    },
    printExpressBill(expressClientId) {
      //打印快递面单
      expressBatchPrint(this.formItem.pickTaskCode, this.formItem.expressPrintName, "uq_ZTO_Delivery", expressClientId, "5404").then(
        response => {
          if (response.data.status) {
            this.$toast.fail("快递面单打印成功");
          } else {
            this.$toast.fail("快递面单打印失败，请联系管理员！");
          }
          this.printBtnDisabled = false;
          this.formItem.pickTaskCode = "";
          this.formItem.printerName = "";
          this.pickTaskCodeFocus();
        }
      );
    },
    printShopping(shoppingClientId, shopprintTemplate) {
      //打印购物清单
      printShoppingListWithBatch(this.formItem.pickTaskCode, this.formItem.shopPrintName, shoppingClientId, "5404", shopprintTemplate).then(
        response => {
          if (response.data.status) {
            this.$toast.fail("购物清单打印成功");
          } else {
            this.$toast.fail("购物清单打印失败，请联系管理员！");
          }
          this.printBtnDisabled = false;
          this.formItem.pickTaskCode = "";
          this.formItem.printerName = "";
          this.pickTaskCodeFocus();
        }
      );
    },
    msgShowTime(msg) {
      this.showMsg = msg;
      this.showMsgOverlay = true;
      setTimeout(() => {
        this.showMsgOverlay = false;
      }, 3000);
    }
  }
};
</script>
<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
</style>
